<!doctype html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>固定布局，加载顶部、底部</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-text-size-adjust: none;
        }

        html {
            font-size: 10px;
        }

        body {
            background-color: #f5f5f5;
            font-size: 1.2em;
        }

        .outer {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        .header {
            position: relative;
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #ccc;
            background-color: #eee;
        }

        .header h1 {
            text-align: center;
            font-size: 2rem;
            font-weight: normal;
        }

        .header .btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 4em;
            height: 100%;
            text-align: center;
            color: #06c;
            font-size: 1.4rem;
            background-color: #ccc;
        }

        .header .btn:active {
            background-color: #aaa;
            color: #fff;
        }

        .inner {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            background-color: #fff;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

        .inner .item {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            -webkit-box-align: center;
            box-align: center;
            -webkit-align-items: center;
            align-items: center;
            padding: 3.125%;
            border-bottom: 1px solid #ddd;
            color: #333;
            text-decoration: none;
        }

        .inner .item img {
            display: block;
            width: 40px;
            height: 40px;
            border: 1px solid #ddd;
        }

        .inner .item h3 {
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            max-height: 40px;
            overflow: hidden;
            line-height: 20px;
            margin: 0 10px;
            font-size: 1.2rem;
        }

        .inner .item .date {
            display: block;
            height: 20px;
            line-height: 20px;
            color: #999;
        }

        .opacity {
            -webkit-animation: opacity 0.3s linear;
            animation: opacity 0.3s linear;
        }

        @-webkit-keyframes opacity {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes opacity {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
    <link type="text/css" rel="stylesheet" href="../dist/dropload.css">
</head>
<body>
<div class="outer">
    <div class="header">
        <h1>头部</h1>
        <a href="javascript:;" class="btn lock">锁定</a>

        <div class="footer" style="position:absolute;left:0;top:0;background-color:#fff;">
            <a href=""></a>
            <a href="#"></a>
        </div>
    </div>
    <div class="inner">
        <div class="lists">
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>1文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>3文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>4文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>5文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>6文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>8文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>9文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>10文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>11文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">

                <h3>12文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
        </div>
    </div>
</div>
<!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>
<script>
    $(function () {
        // 按钮操作
        $('.header .btn').on('click', function () {
            var $this = $(this);
            if (!!$this.hasClass('lock')) {
                $this.attr('class', 'btn unlock');
                $this.text('解锁');
                // 锁定
                dropload.lock();
                $('.dropload-down').hide();
            } else {
                $this.attr('class', 'btn lock');
                $this.text('锁定');
                // 解锁
                dropload.unlock();
                $('.dropload-down').show();
            }
        });

        // dropload
        var dropload = $('.inner').dropload({
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                domUpdate: '<div class="dropload-update">↑释放更新</div>',
                domLoad: '<div class="dropload-load"><span class="dropload-loading"></span>加载中...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad: '<div class="dropload-load"><span class="dropload-loading"></span>加载中...</div>',
                domNoData: '<div class="dropload-noData">暂无数据</div>'
            },
            loadUpFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: 'json/update.json',
                    dataType: 'json',
                    success: function (data) {
                        var result = '';
                        for (var i = 0; i < data.lists.length; i++) {
                            result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                                    + '<img src="' + data.lists[i].pic + '" alt="">'
                                    + '<h3>' + data.lists[i].title + '</h3>'
                                    + '<span class="date">' + data.lists[i].date + '</span>'
                                    + '</a>';
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            $('.lists').html(result);
                            // 每次数据加载完，必须重置
                            dropload.resetload();
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        dropload.resetload();
                    }
                });
            },
            loadDownFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: 'json/more.json',
                    dataType: 'json',
                    success: function (data) {
                        var result = '';
                        for (var i = 0; i < data.lists.length; i++) {
                            result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                                    + '<img src="' + data.lists[i].pic + '" alt="">'
                                    + '<h3>' + data.lists[i].title + '</h3>'
                                    + '<span class="date">' + data.lists[i].date + '</span>'
                                    + '</a>';
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            $('.lists').append(result);
                            // 每次数据加载完，必须重置
                            dropload.resetload();
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        dropload.resetload();
                    }
                });
            }
        });
    });
</script>
</body>
</html>